<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>申请开票 </title>
	<meta http-equiv="expires" content="0">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<link rel="stylesheet" href="../../../css/reset.css" />
	<link rel="stylesheet" href="../../../css/mui.min.css" />
	<link rel="stylesheet" href="../../../css/iconfont.css" />
	<link rel="stylesheet" href="../../../css/cmms.css" />
	<link rel="stylesheet" href="../../../css/mui.picker.min.css" />
	<link rel="stylesheet" href="../../../css/mui.poppicker.css" />
	<link rel="stylesheet" href="../../../css/doctor/order.css?time=123" />
	<link rel="stylesheet" href="../../../css/sale/ticket/ticket.css?time=123" />
	<script src="../../../js/vconsole.min.js"></script>
</head>

<body>
	<div id="ticket">
		<!-- 发票详情 -->
		<div class="mui-row">
			<div class="mui-col-sm-12 mui-col-xs-12 head">
				<p class="font-l">发票详情</p>
			</div>
		</div>
		<ul class="mui-table-view xian">
			<li class="mui-table-view-cell ">
				<h5 class="">	开票抬头	</h5> 
				<span class="mui-badge bg">{{this.message.patientName}}</span>
			</li>
			<li class="mui-table-view-cell ">
				<h5 class="">	开票金额	</h5> 
				<span class="mui-badge bg">￥{{this.message.amount}}</span>
			</li>			
		</ul>
		<!-- 发票类型 -->
		<div class="mui-row">
			<div class="mui-col-sm-12 mui-col-xs-12 head">
				<p class="font-l">发票类型</p>
			</div>
		</div>
		<ul class="mui-table-view ul-bottom">
			<li class="mui-table-view-cell ">
				<h5 class="tic">	电子发票/纸质发票	</h5> 
				<span class="mui-badge bg an-color">
					<div class="mui-switch mui-switch-mini" @click="emailShow">
							<div class="mui-switch-handle "></div>
					</div>
				</span>
			</li>
		</ul>
			<!-- 邮箱 -->
		<ul class="mui-table-view" v-if='isemail()'>
			<li class="mui-table-view-cell ">
				<h5>邮箱</h5> 
				<span class="mui-badge bg">
					<input type="text" id="email" @focus="emailFocus($event)" @blur="emailBlur" class="mui-input-clear" v-model="ema" list="emaillist" placeholder="请填写准确的邮箱">
				</span>
			</li>
			<ul id="emailList" v-show="emailListShow">
				<li v-for="(e,index) in emailList" @tap="selEmail(e)">{{e}}</li>
			</ul>
		</ul>
			<!-- 收件人		 -->
		<ul class="mui-table-view over-auto" v-else>
			<li class="mui-table-view-cell ">
				<h5>收件人</h5> 
				<span class="mui-badge bg">
					<input type="text" id="postUser" @focus="postUserFocus" @blur="postUserBlur" class="mui-input-clear" v-model="postUser" list="postUserList" placeholder="请填写收件人">
				</span>
			</li>
			<ul id="postUserList" v-show="postUserShow">
				<li v-for="(postUser,index) in postUserList" @tap="selPostUser(postUser)">{{postUser}}</li>
			</ul>
			<li class="mui-table-view-cell "@tap="xx()">
				<h5>联系电话</h5> 
				<span class="mui-badge bg">
					<input type="text" maxlength="11" id="phone" @focus="phoneFocus" @blur="phoneBlur" class="mui-input-clear" v-model="tte" list="phoneList" placeholder="请填写收件人联系电话">
				</span>
			</li>
			<ul id="phoneList" v-show="phoneShow">
				<li v-for="(phone,index) in phoneList" @tap="selPhone(phone)">{{phone}}</li>
			</ul>
			<li class="mui-table-view-cell " @tap="selectAdress(0,0,0)">
				<h5>所在地区</h5> 
				<span class="mui-badge bg mui-navigate-right">
					<input type="text" class="mui-input-clear font-z"v-model="region" placeholder="请选择"readonly unselectable="on">
				</span>
			</li>	
			<li class="mui-table-view-cell ">
				<textarea class=" bg " id="address" @focus="addressFocus" @blur="addressBlur" v-model="address" list="addressList" placeholder="请填写详情地址"></textarea>
			</li>
			<ul id="addressList" v-show="addressShow">
				<li v-for="(addr,index) in addressList" @tap="selAdress(addr)">{{addr}}</li>
			</ul>
		</ul>
		<button type="button" class="submit-s" @tap="btn">
			提交
		</button>
	</div>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/mui.picker.min.js"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script src="../../../js/vue.js"></script>
	<!--<script src="../../../js/city.data-3.js"></script>-->
	<script src="../../../js/mui.poppicker.js"></script>
	<script src="../../../js/cmms.js?time=222"></script>
	<script src="../../../js/datalist.js"></script>
	<script>
		new Vue({
			el: "#ticket",
			data (){
				return{
					emailListShow:false,
					postUserShow:false,
					phoneShow:false,
					addressShow:false,
					emailList:[],//邮箱历史记录集合
					postUserList:[],//
					phoneList:[],//电话历史集合
					addressList:[],//地址历史集合
					region:'',
					address:'',
					tte:'',
					postUser:'',
					email:true,
					userId:'',
					orderId:'',
					message:[],
					tel:'',
					ema:'',
					addressArr:{
						provinceCode:'',//省编号
						provinceName:'',//省名称
						cityCode:'',//城市编号
						cityName:'',//城市名
						areaName:'',//区名
						areaCode:''//区编码
					},
					timer:''
				}
			},
		created(){
			
		},
		mounted(){
			this.getUrl(),
			this.getPages()
		},
		methods:{
			//聚焦邮箱
			emailFocus(event){
				console.log(event)
				this.emailListShow = true;
				this.postUserShow = false;
				this.phoneShow = false;
				this.addressShow = false;
			},
			emailBlur(){
				this.emailListShow = false;
			},
			selEmail(e){
				this.ema = e;
				this.emailListShow = false;
			},
			//聚焦收件人
			postUserFocus(){
				this.postUserShow = true;
				this.emailListShow = false;
				this.phoneShow = false;
				this.addressShow = false;
			},
			postUserBlur(){
//				this.postUserShow = false;
				this.timer = setTimeout(() => {
					console.log("收件人消失")
			        this.postUserShow = false;
			        clearTimeout(this.timer)
			        this.timer=null;
			    }, 200);
			},
			selPostUser(postUser){
				console.log(postUser)
				this.postUser = postUser;
				this.postUserBlur();
			},
			//聚焦电话
			phoneFocus(){
				this.phoneShow = true;
				this.emailListShow = false;
				this.postUserShow = false;
				this.addressShow = false;
			},
			phoneBlur(){
//				this.phoneShow = false;
				this.timer = setTimeout(() => {
					this.phoneShow = false;
			        clearTimeout(this.timer)
			        this.timer=null;
			    }, 200);
			},
			selPhone(phone){
				this.tte = phone;
				this.phoneBlur();
			},
			//聚焦地址
			addressFocus(){
				this.addressShow = true;
				this.emailListShow = false;
				this.postUserShow = false;
				this.phoneShow = false;
			},
			addressBlur(){
//				this.addressShow = false;
				this.timer = setTimeout(() => {
					this.addressShow = false;
			        clearTimeout(this.timer)
			        this.timer=null;
			    }, 200);
			},
			selAdress(addr){
				this.addressBlur();
				let index = addr.indexOf(' ');
				if(index!=-1){
					let arr = addr.split(' ');
					console.log(arr)
					this.region = arr[0]+' '+arr[1]+' ' +arr[2];
					this.address = arr[3];					
				}
//				console.log(index)
			},
			xx(){
				console.log(this.tte)
			},
		// 电子/字纸 切换
			isemail(){
				return this.email
			},
			emailShow(){
				this.email=!this.email
				console.log(this.email)
			},
			// 提交申请发票
			btn(){
				if(!this.email){
					if(!(/^1[3456789]\d{9}$/.test(this.tte))){ 
						alert("手机号码有误，请重填");  
						return false; 
					} 
					if( this.postUser==''){
						alert("收件人不能为空");  
						return false; 
					}
					if( this.region==''){
						alert("所在地不能为空");  
						return false; 
					}
				}
				var postUser=this.region+' '+this.address
				console.log(postUser);
				AT.muiAjax('/partner-sale/inspectionFees/billing','post',{
					"email": this.ema,//邮箱
					"invoiceAmount": this.message.amount,//	发票金额
					"invoiceMaterialType":this.email?0:1,//发票材料类型
					"invoiceTitle": this.message.patientName,//开发票的人
					"orderCode": "string", //订单代码
					"postAddress": postUser, //后置地址
					"postPhone": this.tte,//后置电话
					"postUser": this.postUser,//后置用户
					orderId:this.orderId
				},(res)=>{
					this.back()
				});
			},
			back(){
				history.back()
			},
			// 接受location传参
			getUrl(){
				let _this=this;
				var url = location.search; //获取url中"?"符后的字串    
				var theRequest = new Object();  
			
			   	if (url.indexOf("?") != -1) {   
			      var str = url.substr(1);  
//					      console.log(str);
			      strs = str.split("&");  
			      for(var i = 0; i < strs.length; i ++) {   
			         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);   
			      } 
			   	}   
			   	_this.orderId = theRequest.orderId;
			   	_this.userId = theRequest.userId;
			   	// console.log(this.orderId);
			   	// console.log(this.userId);
			},
			// 发送请求
			getPages(){
				let _this=this;
				/*订单ID查报告详情*/
				AT.muiAjax('/partner-sale/order/getOrderDetailsById','post',{
					id:_this.orderId
				},function(res){
					// console.log(res);
					_this.message=res;
					_this.tel=res.patientPhone;
					// console.log(_this.tel);
				});
				//查询历史
				AT.muiAjax('/partner-sale/inspectionFees/getLoginUserOrderInvoiceInfo','post',{
				},function(res){
					 console.log(res);
					_this.emailList = res.email;
					_this.postUserList = res.postUser;
					_this.phoneList = res.postPhone;
					_this.addressList = res.postAddress;
				});
			},
			selectAdress(){
				let _this =this;
				var picker = new mui.PopPicker({
				    layer: 3
				});
				let cityData3 = JSON.parse(localStorage.getItem('cityData'));
				picker.setData(cityData3);
				if(this.region==''){
					picker.pickers[0].setSelectedIndex(0);
					picker.pickers[1].setSelectedIndex(0);
					picker.pickers[2].setSelectedIndex(0);
				}else{
					let arr = this.region.split(' ');
					let provinceIndex = cityData3.findIndex(target=>target.text==arr[0]);
					if(provinceIndex!=-1){
						let cityArr = cityData3[provinceIndex].children;
						console.log(cityArr);
						let cityIndex = cityArr.findIndex(target=>target.text==arr[1]);
						console.log(cityIndex);
						if(cityIndex!=-1){
							let areaArr = cityArr[cityIndex].children;
							console.log(areaArr)
							let areaIndex = areaArr.findIndex(target=>target.text==arr[2]);
							console.log(areaIndex);
							picker.pickers[0].setSelectedIndex(provinceIndex);
							picker.pickers[1].setSelectedIndex(cityIndex);
							picker.pickers[2].setSelectedIndex(areaIndex);
						}
					}
				}
				picker.show(function(SelectedItem) {
					console.log(SelectedItem);
					/*省市区显示*/
					_this.region = SelectedItem[0].text+' '+SelectedItem[1].text+' '+(SelectedItem[2].text?SelectedItem[2].text:'');
//					console.log(_this.region);
					/*省市区的名称和编号*/
					_this.addressArr.provinceCode=SelectedItem[0].value;
					_this.addressArr.provinceName=SelectedItem[0].text;
					_this.addressArr.cityCode=SelectedItem[1].value;
					_this.addressArr.cityName=SelectedItem[1].text;
					_this.addressArr.areaCode=SelectedItem[2].value;
					_this.addressArr.areaName=SelectedItem[2].text;
					picker.dispose();
				});
			},
		},
	})
</script>
</body>

</html>